import ReadOnlyEditor from '@/components/tiptap-templates/simple/read-only-editor';
import { Button } from '@/components/ui/button';
import { prisma } from '@/lib/prisma';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import React from 'react'

async function Page({ params }: {
    params: Promise<{ id: string }>
}) {
    const { id } = await params;

    if (!id) return <div>Invalid post Id</div>

    const post = await prisma.post.findUnique({
        where: { id },
    });

    if (!post) notFound();

    return (
        <div className='max-w-4xl mx-auto p-8'>
            <Link href="/posts">
                <Button variant="ghost" className='mb-4'>
                    ← Back
                </Button>
            </Link>
            <article className='border rounded-lg p-8'>
                <h1 className='text-4xl font-bold mb-4'>{post.title}</h1>
                <p className='text-sm text-slate-500 mb-8'>
                    {new Date(post.createAt).toLocaleDateString()}
                </p>
                <ReadOnlyEditor content={post.content} />
            </article>
        </div>
    )
}

export default Page